<template>
    <div>
        <!--        <el-button @click="testConstellation">-->
        <!--            测试头条-->
        <!--        </el-button>-->
        <div style="display: flex">
            <el-card style="width: 100%;height: 15vh">

                <div style="display: flex;">
                    <!--            头像          -->
                    <div style="flex-direction: row;">
                        <el-avatar v-if="this.account.avatar===null || this.account.avatar===''"
                                   icon="el-icon-user-solid" :size="75"></el-avatar>
                        <img v-if="!(this.account.avatar===null || this.account.avatar==='')" :src="this.account.avatar"
                             style="border-radius: 50%;" width="75" height="75">
                    </div>

                    <div style="display: flex;margin: 5px 20px;justify-content: center;align-content: center;flex-direction: column;">
                        <!--            问候语         -->
                        <div style="font-weight: bold;font-size: 20px;padding: 5px">
                            您好，{{ this.account.name }}，祝您开心每一天！
                        </div>
                        <!--            天气情况        -->
                        <div style="font-size: 15px;padding: 5px">{{ this.weatherInfo }}</div>
                    </div>

                </div>
            </el-card>
        </div>

        <div style="display: flex;">


            <!--      财经新闻  -->
            <div style="width: 49%;margin-top: 20px">
                <el-card>

                    <span style="font-size: 18px">最新财经头条</span>

                    <!--                分割线-->
                    <el-divider/>

                    <!--                系统公告信息      -->
                    <el-table height="240" :data="toutiao" border :header-cell-style="{fontSize: '14px'}">

                        <el-table-column width="50" label="序号" type="index" align="center"></el-table-column>
                        <el-table-column label="标题" show-overflow-tooltip prop="title"
                                         align="center"></el-table-column>
                        <el-table-column width="100" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" plain @click="toTouTiaoInfo(scope.row)">看头条</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>


            <!--            最新系统公告        -->
            <div style="width: 49%;height: 48vh;margin-top: 20px;margin-left: 25px">
                <el-card>

                    <span style="font-size: 18px">最新系统公告</span>
                    <el-link type="primary" style="float: right;margin: 5px;" @click="toSystemNotice"> >>查看更多
                    </el-link>

                    <!--                分割线-->
                    <el-divider/>

                    <!--                系统公告信息      -->
                    <div>
                        <el-table max-height="400" :data="systemNotice" border :header-cell-style="{fontSize: '14px'}">
                            <el-table-column width="50" label="序号" type="index" align="center"></el-table-column>
                            <el-table-column width="200" label="标题" show-overflow-tooltip prop="title"
                                             align="center"></el-table-column>
                            <el-table-column label="内容" show-overflow-tooltip prop="content"
                                             align="center"></el-table-column>
                            <el-table-column width="100" label="发布人" prop="publisher"
                                             align="center"></el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </div>
        </div>


        <!--        星座检测    -->
        <el-card style="width: 100%;margin-top: 20px;">
            <div style="display: flex;justify-content: center;align-items: center">


                <div style="margin-left: 0px;width: 200px!important;">
                    <span style="color: #3cb8ff;margin: 0 15px">选择你喜欢的星座查看运势</span>
                    <div style="margin-top: 13px;width: 200px;overflow: hidden">
                        <el-select
                                v-model="consName" placeholder="请选择">
                            <el-option
                                    v-for="item in consNames"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" style="width: 205px;margin-top: 13px" @click="queryconsName">占卜运势
                    </el-button>
                </div>


                <div style="margin-left: 80px;">
                    <el-descriptions title="星座运势" :column="5">

                        <el-descriptions-item label="日期">{{ this.constellation.datetime }}</el-descriptions-item>
                        <el-descriptions-item label="星座">{{ this.constellation.name }}</el-descriptions-item>
                        <el-descriptions-item label="速配星座">{{ this.constellation.QFriend }}</el-descriptions-item>
                        <el-descriptions-item label="幸运色">{{ this.constellation.color }}</el-descriptions-item>
                        <el-descriptions-item label="健康指数">{{ this.constellation.health }}</el-descriptions-item>
                        <el-descriptions-item label="爱情指数">{{ this.constellation.love }}</el-descriptions-item>
                        <el-descriptions-item label="工作指数">{{ this.constellation.work }}</el-descriptions-item>
                        <el-descriptions-item label="财运指数">{{ this.constellation.money }}</el-descriptions-item>
                        <el-descriptions-item label="幸运数字">{{ this.constellation.number }}</el-descriptions-item>
                        <el-descriptions-item label="综合指数">{{ this.constellation.all }}</el-descriptions-item>
                        <el-descriptions-item label="整体运势">{{ this.constellation.summary }}</el-descriptions-item>

                    </el-descriptions>
                </div>
            </div>


        </el-card>


    </div>
</template>


<script>

export default {
    name: 'HomeView',
    data() {
        return {
            account: {},             // 存储登录的用户数据
            weatherInfo: '今日晴  10℃ - 20℃',         // 存储天气情况
            city: '太原',            // 存储城市
            activeName: '',         //  控制折叠面板的展开
            systemNotice: [],       // 存储系统公告信息
            consNames: [
                {value: '白羊座', label: '白羊座'},
                {value: '金牛座', label: '金牛座'},
                {value: '双子座', label: '双子座'},
                {value: '巨蟹座', label: '巨蟹座'},
                {value: '狮子座', label: '狮子座'},
                {value: '处女座', label: '处女座'},
                {value: '天秤座', label: '天秤座'},
                {value: '天蝎座', label: '天蝎座'},
                {value: '射手座', label: '射手座'},
                {value: '摩羯座', label: '摩羯座'},
                {value: '水瓶座', label: '水瓶座'},
                {value: '双鱼座', label: '双鱼座'}
            ],       // 所有星座名称
            consName: '',         // 星座名称
            type: 'today',        // 获取数据
            constellation: {
                'date': 20240131,
                'name': "射手座",
                'QFriend': "白羊座",
                'color': "茶色",
                'datetime': "2024年01月31日",
                'health': "78",
                'love': "65",
                'work': "75",
                'money': "90",
                'number': 3,
                'summary': "整体运势相对普通，需要付出更多的努力才能获得幸运的机会。虽然运势没有特别亮眼的表现，但也不用过于灰心。关键在于你的积极心态和坚持不懈的努力。付出足够的努力，就能逐渐迎来更好的机遇。生活方面，你可以考虑参加一些户外运动或旅行，享受大自然的美景和活力。",
                'all': "75",
                'resultcode': "200",
                'error_code': 0
            },      // 存储星座信息
            toutiao: [
                {
                    "uniquekey": "f052df04f2b1ab7a2bb2dbcbdea6f6fa",
                    "title": "邮储银行落地全国首笔“ESG贷款+保险”业务",
                    "date": "2024-01-31 16:20:00",
                    "category": "财经",
                    "author_name": "每日看点快看",
                    "url": "https:\/\/mini.eastday.com\/mobile\/240131162002289331312.html",
                    "thumbnail_pic_s": "",
                    "is_content": "1"
                },
                {
                    "uniquekey": "98a6e8e02c68820105a4654665848924",
                    "title": "福建2023年跨境人民币业务金额首次突破一万亿元",
                    "date": "2024-01-31 16:10:00",
                    "category": "财经",
                    "author_name": "人民网，供稿：人民资讯",
                    "url": "https:\/\/mini.eastday.com\/mobile\/240131161008857106131.html",
                    "thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240131\/20240131161008_3dace1b2460b2e99d147b572fa34c5b8_1_mwpm_03201609.jpeg",
                    "is_content": "1"
                },
                {
                    "uniquekey": "88bd41b8f9d920cbb68098fa99f6f125",
                    "title": "3年跌超50%，6亿限售股将解禁，重庆银行稳定股价能如愿吗",
                    "date": "2024-01-31 16:08:00",
                    "category": "财经",
                    "author_name": "财经野武士",
                    "url": "https:\/\/mini.eastday.com\/mobile\/240131160800244579675.html",
                    "thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240131\/1280x903_65b9ffdebe52d_mwpm_03201609.jpeg",
                    "thumbnail_pic_s02": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240131\/1280x826_65b9ffdf586a9_mwpm_03201609.jpeg",
                    "thumbnail_pic_s03": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240131\/1280x807_65b9ffdfc6578_mwpm_03201609.jpeg",
                    "is_content": "1"
                },
                {
                    "uniquekey": "296b09477a4d4b7590c923fbd5ce1c45",
                    "title": "连云港与宿迁之争 制造业仍是决胜关键",
                    "date": "2024-01-31 16:07:00",
                    "category": "财经",
                    "author_name": "每日看点快看",
                    "url": "https:\/\/mini.eastday.com\/mobile\/240131160757933825576.html",
                    "thumbnail_pic_s": "https:\/\/minipc.eastday.com\/tf\/pexels\/4b146bd3835f9342f76f68eb13f429a4_mwpm_03201609.jpeg",
                    "is_content": "1"
                },
                {
                    "uniquekey": "4707bac0eaa479e49870352916f40dee",
                    "title": "“竞”出来的春天 “拼”出来的增长",
                    "date": "2024-01-31 16:07:00",
                    "category": "财经",
                    "author_name": "每日看点快看",
                    "url": "https:\/\/mini.eastday.com\/mobile\/240131160757766962142.html",
                    "thumbnail_pic_s": "https:\/\/minipc.eastday.com\/tf\/pexels\/1e6665bd71ed0da70b449fb573939773_mwpm_03201609.jpeg",
                    "is_content": "1"
                }
            ],         // 存储头条信息


        }
    },

    mounted() {
        // 页面加载时实现的方法
        // 获取当前登录的用户信息
        this.account = JSON.parse(localStorage.getItem("account"));
        // console.log(this.account)

        // 到时候打开注释
        // 获取天气信息
        this.$request.get('/weather?city=' + this.city).then(res => {
            console.log(res)
            if (res.code === '200') {
                this.weatherInfo = res.data
            }
        })

        // 获取系统公告信息
        this.$request.get('/systemNotice/latest').then(res => {
            if (res.code === '200') {
                this.systemNotice = res.data
            } else {
                this.$message.error(res.msg)
            }
        })


        // 到时候打开注释
        // 获取财经头条信息
        this.$request.get('/toutiao').then(res => {
            if (res.code === '200') {
                this.toutiao = res.data.data
            } else {
                // 没有请求api/请求失败     则返回默认信息
                this.toutiao = [
                    {
                        "uniquekey": "f052df04f2b1ab7a2bb2dbcbdea6f6fa",
                        "title": "邮储银行落地全国首笔“ESG贷款+保险”业务",
                        "date": "2024-01-31 16:20:00",
                        "category": "财经",
                        "author_name": "每日看点快看",
                        "url": "https:\/\/mini.eastday.com\/mobile\/240131162002289331312.html",
                        "thumbnail_pic_s": "",
                        "is_content": "1"
                    },
                    {
                        "uniquekey": "98a6e8e02c68820105a4654665848924",
                        "title": "福建2023年跨境人民币业务金额首次突破一万亿元",
                        "date": "2024-01-31 16:10:00",
                        "category": "财经",
                        "author_name": "人民网，供稿：人民资讯",
                        "url": "https:\/\/mini.eastday.com\/mobile\/240131161008857106131.html",
                        "thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/news\/20240131\/20240131161008_3dace1b2460b2e99d147b572fa34c5b8_1_mwpm_03201609.jpeg",
                        "is_content": "1"
                    },
                    {
                        "uniquekey": "88bd41b8f9d920cbb68098fa99f6f125",
                        "title": "3年跌超50%，6亿限售股将解禁，重庆银行稳定股价能如愿吗",
                        "date": "2024-01-31 16:08:00",
                        "category": "财经",
                        "author_name": "财经野武士",
                        "url": "https:\/\/mini.eastday.com\/mobile\/240131160800244579675.html",
                        "thumbnail_pic_s": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240131\/1280x903_65b9ffdebe52d_mwpm_03201609.jpeg",
                        "thumbnail_pic_s02": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240131\/1280x826_65b9ffdf586a9_mwpm_03201609.jpeg",
                        "thumbnail_pic_s03": "https:\/\/dfzximg02.dftoutiao.com\/minimodify\/20240131\/1280x807_65b9ffdfc6578_mwpm_03201609.jpeg",
                        "is_content": "1"
                    },
                    {
                        "uniquekey": "296b09477a4d4b7590c923fbd5ce1c45",
                        "title": "连云港与宿迁之争 制造业仍是决胜关键",
                        "date": "2024-01-31 16:07:00",
                        "category": "财经",
                        "author_name": "每日看点快看",
                        "url": "https:\/\/mini.eastday.com\/mobile\/240131160757933825576.html",
                        "thumbnail_pic_s": "https:\/\/minipc.eastday.com\/tf\/pexels\/4b146bd3835f9342f76f68eb13f429a4_mwpm_03201609.jpeg",
                        "is_content": "1"
                    },
                    {
                        "uniquekey": "4707bac0eaa479e49870352916f40dee",
                        "title": "“竞”出来的春天 “拼”出来的增长",
                        "date": "2024-01-31 16:07:00",
                        "category": "财经",
                        "author_name": "每日看点快看",
                        "url": "https:\/\/mini.eastday.com\/mobile\/240131160757766962142.html",
                        "thumbnail_pic_s": "https:\/\/minipc.eastday.com\/tf\/pexels\/1e6665bd71ed0da70b449fb573939773_mwpm_03201609.jpeg",
                        "is_content": "1"
                    }
                ]
            }
        })


    },
    methods: {

        //  获取星座运势
        queryconsName() {
            this.$request.get('/constellation?consName=' + this.consName + '&type=' + this.type).then(res => {
                if (res.code === '200') {
                    this.constellation = res.data
                    // console.log(this.constellation)
                } else {
                    // 没有请求api/请求失败     则返回默认信息
                    this.constellation = {
                        'date': 20240131,
                        'name': "射手座",
                        'QFriend': "白羊座",
                        'color': "茶色",
                        'datetime': "2024年01月31日",
                        'health': "78",
                        'love': "65",
                        'work': "75",
                        'money': "90",
                        'number': 3,
                        'summary': "整体运势相对普通，需要付出更多的努力才能获得幸运的机会。虽然运势没有特别亮眼的表现，但也不用过于灰心。关键在于你的积极心态和坚持不懈的努力。付出足够的努力，就能逐渐迎来更好的机遇。生活方面，你可以考虑参加一些户外运动或旅行，享受大自然的美景和活力。",
                        'all': "75",
                        'resultcode': "200",
                        'error_code': 0
                    }
                }
            })
        },

        //  跳转到头条新闻页面
        toTouTiaoInfo(toutiao) {
            // 转到这个网站
            window.open(toutiao.url, "_blank");
        },

        // 跳转到系统公告页面
        toSystemNotice() {
            this.$router.push('/manager/systemNotice')
        },

    }


}
</script>


<style>
//宽度可以使用max-width显示,占比为屏幕占比，高度用max-height是行不通的,于是就用的超出行省略，当
//在限制的宽度之内多少行限制(不限制当内容几千几万字时就挂了),padding为了调整我这个正好15行省略看
//起来样式不会出问题,有问题的话可以调padding,line-height,font-size保证展示框样式完整
.el-tooltip__popper {
    max-width: 30%;
    padding-bottom: 5px !important;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 15;
    -webkit-box-orient: vertical;

}

.el-tooltip__popper, .el-tooltip__popper.is-dark {
    background: rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 24px;
}


/* 隐藏横向滚动条 */
.el-aside::-webkit-scrollbar {
    display: none;

}


</style>